<template>
  <div>
     <!-- @close="close('totalPlanForm')" -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="34%"
      center
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="totalPlanForm" :rules="rules" :model="totalPlanForm" label-width="110px">
        <el-form-item label="阶段" prop="stageId">
          <el-select v-model="totalPlanForm.stageId" placeholder="请选择阶段类型" @change="sureStageId">
            <el-option
              v-for="item in stageType"
              :key="item.id"
              :label="item.stageName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划工时" prop="workHours">
          <el-input v-model="totalPlanForm.workHours" placeholder="请输入工期"></el-input>
        </el-form-item>
        <el-form-item label="计划开始日期" prop="startDate">
          <el-date-picker
            v-model="totalPlanForm.startDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择计划开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="计划结束日期" prop="endDate">
          <el-date-picker
            v-model="totalPlanForm.endDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择计划结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="负责人" prop="principalId">
          <el-select v-model="totalPlanForm.principalId" multiple placeholder="请选择负责人">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标">
          <el-input type="textarea" v-model="totalPlanForm.target" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStageList, selectUserByStage } from "@/service/stageApi";
import { addVersionPlan, modifyVersionPlan } from "@/service/progressApi";
export default {
  name: "totalPlanDailog",
  // props: ["versionId"],
  data() {
    return {
      dialogFormVisible: false,
      title: "",
      totalPlanForm: {
        id: null,
        versionId: null,
        stageId: null,
        workHours: "",
        startDate: "",
        endDate: "",
        target: "",
        principalId: []
      },
      principalName: "",
      stageType: [],
      options: [],
      rules: {
        stageId: [
          { required: true, message: "请选择阶段类型", trigger: "blur" }
        ],
        workHours: [{ required: true, message: "请输入工期", trigger: "blur" }],
        startDate: [
          { required: true, message: "请选择计划开始日期", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "请选择计划结束日期", trigger: "blur" }
        ],
        principalId: [
          { required: true, message: "请选择负责人", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    //根据阶段显示对应的负责人
    sureStageId() {
      //获取责任人下拉列表
      selectUserByStage(this.totalPlanForm.stageId).then(res => {
        if (res.code == 0) {
          this.options = res.data;
        } else {
          this.$message.warning(`${res.message}`);
        }
      });
    },
    showDailog(title, row) {
      console.log("数据", row);
      this.title = title;
      this.dialogFormVisible = true;
      console.log(this.title);

      if (this.title === "修改计划") {
        //显示数据
        this.totalPlanForm = row;
        console.log(this.totalPlanForm);
        //根据阶段显示对应的负责人
        this.sureStageId();
        //需要先判断负责人id是否为字符串类型
        if (typeof row.principalId === "string") {
          this.totalPlanForm.principalId = row.principalId
            .split(",")
            .map(elem => Number(elem));
        }
        console.log("负责人id", this.totalPlanForm.principalId);
      } else {
        this.$nextTick(() => {
          this.totalPlanForm.target = "";
          this.totalPlanForm = {};
          console.log(this.totalPlanForm);
        });
      }
    },
    //确定修改计划
    sure() {
      if (this.submitForm("totalPlanForm")) {
        this.$emit("submitForm", this.totalPlanForm, this.title);
        console.log(this.totalPlanForm, "totalPlanForm");
      }
    },
    //关闭弹框的时候清空验证信息和表格内容
    // close(formName) {
    //   this.$refs[formName].clearValidate();
    //   this.$refs[formName].resetFields();
    // },
    submitForm(formName) {
      let bool;
      this.$refs[formName].validate(valid => {
        if (valid) {
          bool = true;
        } else {
          console.log("error submit!!");
          bool = false;
        }
      });
      return bool;
    },
    init() {
      //获取阶段类型下拉列表
      getStageList().then(res => {
        this.stageType = res.data;
      });
    }
  }
};
</script>

<style scoped>
</style>